<html>

<!--
Copyright (c) 2015, Apps4Av Inc. (apps4av.com)
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
    *     * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    *
    *     THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

authors: zkhan
-->


<head>
  <script src="file:///android_asset/jquery.min.js"></script>
  <script src="file:///android_asset/bootstrap.min.js"></script>
  <script src="file:///android_asset/bootstrap-select.min.js"></script>
  <script src="file:///android_asset/bootbox.min.js"></script>
  <script src="file:///android_asset/toastr.min.js"></script>
  <link rel="stylesheet" href="file:///android_asset/bootstrap.min.css">
  <link rel="stylesheet" href="file:///android_asset/bootstrap-select.min.css">
  <link rel="stylesheet" href="file:///android_asset/toastr.min.css">
  <style type="text/css">
    button {color: black; height:40px;}
    input {height:40px; border-radius: 5px;}
    .toast {opacity: 1 !important;}
  </style>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type='text/javascript' >

function zeroPad(num) {
	var out = num.toString();
	if(out.length == 2) {
		return out;
	}
	else {
		return '0' + out;
	}
}

function refresh() {
	location.reload(true);
}

function getImageWinds(type, level, ftime) {
	var elem = document.getElementById('weatherImageWinds');
	if     (level == '030') level = '900';
	else if(level == '060') level = '800';
	else if(level == '090') level = '725';
	else if(level == '120') level = '650';
	else if(level == '150') level = '575';
	else if(level == '180') level = '500';
	else if(level == '240') level = '400';
	else if(level == '300') level = '300';
	else if(level == '360') level = '225';
	else if(level == '420') level = '175';
	else if(level == '480') level = '125';

	var filename = 'https://aviationweather.gov/data/products/wind/' + ftime + '_' + level + '_' + type + '.gif';
	elem.src = filename;
}

function updateImageWinds() {
	var telem = document.getElementById('type');
	var type = telem.options[telem.selectedIndex].value;
	var lelem = document.getElementById('level');
	var level = lelem.options[lelem.selectedIndex].value;
	var felem = document.getElementById('fore');
	var ftime = felem.options[felem.selectedIndex].value;
	getImageWinds(type, level, ftime);
}

function getImageTurb(level, ftime, cat) {
	var elem = document.getElementById('weatherImageTurb');
	var filename = 'https://aviationweather.gov/adds/data/turbulence/' + ftime + '_gtg_cat-' + cat + '_' + level + '.gif';
	elem.src = filename;
}

function updateImageTurb() {
	var lelem = document.getElementById('levelTurb');
	var level = lelem.options[lelem.selectedIndex].value;
	var felem = document.getElementById('foreTurb');
	var celem = document.getElementById('catTurb');
	var fore = felem.options[felem.selectedIndex].value;
	var cat = celem.options[celem.selectedIndex].value;
	getImageTurb( level, fore,  cat);
}

function getImageIcing(type, level, ftime) {
	var elem = document.getElementById('weatherImageIcing');
	var filename = 'https://aviationweather.gov/adds/data/icing/' + ftime + '_' + type + '_' + level + '.gif';
	elem.src = filename;
}

function updateImageIcing() {
	var lelem = document.getElementById('levelIce');
	var level = lelem.options[lelem.selectedIndex].value;
	var felem = document.getElementById('foreIce');
	var fore = felem.options[felem.selectedIndex].value;
	var telem = document.getElementById('typeIce');
	var type = telem.options[telem.selectedIndex].value;
	if(fore == '00') type = 'cip' + type;
	else type = 'fip' + type;
	getImageIcing(type, level, fore );
}

function getImageMisc(type) {
	var elem = document.getElementById('weatherImageMisc');
	elem.src = type;
}

function updateImageMisc() {
	var melem = document.getElementById('typeMisc');
	var misc = melem.options[melem.selectedIndex].value;
	getImageMisc(misc);
}

function getImageProg(type) {
	var elem = document.getElementById('weatherImageProg');
	elem.src = type;
}

function updateImageProg() {
	var elem = document.getElementById('typeProg');
	var prog = elem.options[elem.selectedIndex].value;
	getImageProg(prog);
}

function settext() {
	var txt = document.getElementById('timetxt');
	var now = new Date();
	var utc =  (now.getUTCMonth()) + 1 + '/' + now.getUTCDate() + ' ' + zeroPad(now.getUTCHours()) + '' + zeroPad(now.getUTCMinutes()) + ' UTC';

	txt.value = utc;
	getData();

}

function getData() {
	AndroidWeather.getWeather();
}

function updateData(weather) {
	var table = document.getElementById('plantable');
	table.innerHTML = weather;
}

window.onload = settext;

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    updateImageMisc();
    updateImageProg();
    updateImageWinds();
    updateImageTurb();
    updateImageIcing();
});

</script>

</head>

<body>

  <ul class="nav nav-tabs" style="display:inline-flex;">
    <li class="active"><a href="#textual">Textual</a></li>
    <li><a href="#misc">Misc</a></li>
    <li><a href="#prog">Prog</a></li>
    <li><a href="#windstemp">Winds/Temp</a></li>
    <li><a href="#turb">Turb</a></li>
    <li><a href="#icing">Icing</a></li>
  </ul>

  <div class="tab-content">
    <div id="misc" class="tab-pane fade">
      <h3>Misc. Charts</h3>
      <select class="selectpicker" id='typeMisc' data-mobile="true"  name='typeMisc' onChange='updateImageMisc()'>
        <option value='https://aviationweather.gov/adds/data/airmets/airmets_ALL.gif'>AIRMETS</option>
        <option value='https://aviationweather.gov/adds/data/fzl/latest_fzl.gif'>Freezing Levels</option>
        <option value='https://aviationweather.gov/adds/data/metars/sfc_ina.gif'>Flight Category</option>
        <option value='https://aviationweather.gov/adds/data/pireps/pireps_US_TB.gif'>Turbulence PIREPs</option>
        <option value='https://aviationweather.gov/adds/data/pireps/pireps_US_WS.gif'>Sky Conditions PIREPs</option>
        <option value='https://aviationweather.gov/data/iffdp/2020.gif'>Weather Depiction</option>
        <option value='https://aviationweather.gov/data/iffdp/2080.gif'>Radar Summary</option>
        <option value='https://aviationweather.gov/data/obs/sat/us/sat_vis_us.jpg'>Satellite</option>
        <option value='http://www.ospo.noaa.gov/data/land/fire/currenthms.jpg'>Fire and Smoke</option>
      </select>
      <br><img id='weatherImageMisc'><br>
    </div>
    <div id="prog" class="tab-pane fade">
      <h3>Prognostic Charts</h3>
      <select class="selectpicker" id='typeProg' data-mobile="true" name='typeProg' onChange='updateImageProg()'>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_sfc_analysis.gif'>WPC Surface Analysis</option>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_12_fcst.gif'>WPC 12 HR Prognostic</option>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_24_fcst.gif'>WPC 24 HR Prognostic</option>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_36_fcst.gif'>WPC 36 HR Prognostic</option>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_48_fcst.gif'>WPC 48 HR Prognostic</option>
        <option value='https://aviationweather.gov/adds/data/progs/hpc_mid_072.gif'>WPC 3 day Prognostic</option>
        <option value='https://aviationweather.gov/data/products/swl/ll_00_4_cl_new.gif'>Low Level Significant 0000Z</option>
        <option value='https://aviationweather.gov/data/products/swl/ll_06_4_cl_new.gif'>Low Level Significant 0600Z</option>
        <option value='https://aviationweather.gov/data/products/swl/ll_12_4_cl_new.gif'>Low Level Significant 1200Z</option>
        <option value='https://aviationweather.gov/data/products/swl/ll_18_4_cl_new.gif'>Low Level Significant 1800Z</option>
        <option value='https://aviationweather.gov/data/products/swm/PGNE14_00_CL.gif'>Mid Level Significant 0000Z</option>
        <option value='https://aviationweather.gov/data/products/swm/PGNE14_06_CL.gif'>Mid Level Significant 0600Z</option>
        <option value='https://aviationweather.gov/data/products/swm/PGNE14_12_CL.gif'>Mid Level Significant 1200Z</option>
        <option value='https://aviationweather.gov/data/products/swm/PGNE14_18_CL.gif'>Mid Level Significant 1800Z</option>
      </select>
      <br><img id='weatherImageProg'><br>
    </div>
    <div id="windstemp" class="tab-pane fade">
      <h3>Winds/Temperature Charts</h3>
      <select class="selectpicker" id='type' name='type' data-mobile="true" onChange='updateImageWinds()'>
        <OPTION VALUE='wind'>Wind Speed</OPTION>
        <OPTION VALUE='temp'>Temperature</OPTION>
        <OPTION VALUE='isa'>Temp. Difference</OPTION>
        <OPTION VALUE='windstrm'>Streamlines</OPTION>
      </select>
      <select class="selectpicker" id='level' name='level' data-mobile="true"  onChange='updateImageWinds()'>
        <OPTION VALUE='sfc'>sfc</OPTION>
        <OPTION VALUE='900'>3,000</OPTION>
        <OPTION VALUE='800'>6,000</OPTION>
        <OPTION VALUE='725'>9,000</OPTION>
        <OPTION VALUE='650'>12,000</OPTION>
        <OPTION VALUE='575'>15,000</OPTION>
        <OPTION VALUE='500'>FL180</OPTION>
        <OPTION VALUE='400'>FL240</OPTION>
        <OPTION VALUE='300'>FL300</OPTION>
        <OPTION VALUE='225'>FL360</OPTION>
        <OPTION VALUE='175'>FL420</OPTION>
        <OPTION VALUE='125'>FL480</OPTION>
      </select>
      <select class="selectpicker" id='fore' name='fore' data-mobile="true"  onChange='updateImageWinds()'>
        <option value='F00_rap'>0hr</option>
        <option value='F01_rap'>1hr</option>
        <option value='F02_rap'>2hr</option>
        <option value='F03_rap'>3hr</option>
        <option value='F04_rap'>4hr</option>
        <option value='F05_rap'>5hr</option>
        <option value='F06_rap'>6hr</option>
        <option value='F07_rap'>7hr</option>
        <option value='F08_rap'>8hr</option>
        <option value='F09_rap'>9hr</option>
        <option value='F10_rap'>10hr</option>
        <option value='F11_rap'>11hr</option>
        <option value='F12_rap'>12hr</option>
        <option value='F13_rap'>13hr</option>
        <option value='F14_rap'>14hr</option>
        <option value='F15_rap'>15hr</option>
        <option value='F16_rap'>16hr</option>
        <option value='F17_rap'>17hr</option>
        <option value='F18_rap'>18hr</option>
      </select>
      <br><img id='weatherImageWinds'><br>
    </div>
    <div id="turb" class="tab-pane fade">
      <h3>Turbulence Charts</h3>
      <select class="selectpicker" id='levelTurb' data-mobile="true"  name='levelTurb' onChange='updateImageTurb()'>
        <OPTION VALUE='010'>1,000</OPTION>
        <OPTION VALUE='030'>3,000</OPTION>
        <OPTION VALUE='050'>5,000</OPTION>
        <OPTION VALUE='070'>7,000</OPTION>
        <OPTION VALUE='090'>9,000</OPTION>
        <OPTION VALUE='110'>11,000</OPTION>
        <OPTION VALUE='130'>13,000</OPTION>
        <OPTION VALUE='150'>15,000</OPTION>
        <OPTION VALUE='170'>17,000</OPTION>
        <OPTION VALUE='190'>FL190</OPTION>
        <OPTION VALUE='210'>FL210</OPTION>
        <OPTION VALUE='230'>FL230</OPTION>
        <OPTION VALUE='250'>FL250</OPTION>
        <OPTION VALUE='270'>FL270</OPTION>
        <OPTION VALUE='290'>FL290</OPTION>
        <OPTION VALUE='310'>FL310</OPTION>
        <OPTION VALUE='330'>FL330</OPTION>
        <OPTION VALUE='350'>FL350</OPTION>
        <OPTION VALUE='370'>FL370</OPTION>
        <OPTION VALUE='390'>FL390</OPTION>
        <OPTION VALUE='410'>FL410</OPTION>
        <OPTION VALUE='430'>FL430</OPTION>
        <OPTION VALUE='450'>FL450</OPTION>
      </select>
      <select class="selectpicker" id='foreTurb' data-mobile="true"  name='foreTurb' onChange='updateImageTurb()'>
        <option value='00'>0hr</option>
        <option value='01'>1hr</option>
        <option value='02'>2hr</option>
        <option value='03'>3hr</option>
        <option value='06'>6hr</option>
        <option value='09'>9hr</option>
        <option value='12'>12hr</option>
      </select>
      <select class="selectpicker" id='catTurb' data-mobile="true"  name='catTurb' onChange='updateImageTurb()'>
        <option value='lgt'>Light</option>
        <option value='med'>Medium</option>
        <option value='hvy'>Heavy</option>
      </select>
      <br><img id='weatherImageTurb'><br>
    </div>
    <div id="icing" class="tab-pane fade">
      <h3>Icing Charts</h3>
      <select class="selectpicker" id='typeIce' data-mobile="true"  name='typeIce' onChange='updateImageIcing()'>
        <OPTION VALUE='sev'>Severity</OPTION>
        <OPTION VALUE='sev25'>Severity(Prob>25%)</OPTION>
        <OPTION VALUE='sev50'>Severity(Prob>50%)</OPTION>
        <OPTION VALUE=''>Probability</OPTION>
      </select>
      <select class="selectpicker" id='levelIce' data-mobile="true"  name='levelIce' onChange='updateImageIcing()'>
        <OPTION VALUE='010'>1,000</OPTION>
        <OPTION VALUE='030'>3,000</OPTION>
        <OPTION VALUE='050'>5,000</OPTION>
        <OPTION VALUE='070'>7,000</OPTION>
        <OPTION VALUE='090'>9,000</OPTION>
        <OPTION VALUE='110'>11,000</OPTION>
        <OPTION VALUE='130'>13,000</OPTION>
        <OPTION VALUE='150'>15,000</OPTION>
        <OPTION VALUE='170'>17,000</OPTION>
        <OPTION VALUE='190'>FL190</OPTION>
        <OPTION VALUE='210'>FL210</OPTION>
        <OPTION VALUE='230'>FL230</OPTION>
        <OPTION VALUE='250'>FL250</OPTION>
        <OPTION VALUE='270'>FL270</OPTION>
        <OPTION VALUE='290'>FL290</OPTION>
        <OPTION VALUE='max'>max</OPTION>
      </select>
      <select class="selectpicker" id='foreIce' data-mobile="true"  name='foreIce' onChange='updateImageIcing()'>
        <option value='00'>0hr</option>
        <option value='02'>2hr</option>
        <option value='03'>3hr</option>
        <option value='06'>6hr</option>
        <option value='09'>9hr</option>
        <option value='12'>12hr</option>
      </select><br>
      <br><img id='weatherImageIcing'><br>
    </div>
    <div id="textual" class="tab-pane fade in active">
      <h3>Textual Weather/NOTAMS</h3>
      <p id='plantable'>placeholder</p>
    </div>
  </div>

</body>

</html>


